<!DOCTYPE HTML>
<html>
<head>
<title>pixi.js example 12 Spine</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="pixi.js"></script>
</head>
<body>
<script>
// create an array of assets to load
var assetsToLoader = ["../../logo_small.png", "data/PixieSpineData.json", "data/Pixie.json", "data/iP4_BGtile.jpg", "data/iP4_ground.jpg"];
// create a new loader
loader = new PIXI.AssetLoader(assetsToLoader);
// use callback
loader.onComplete = onAssetsLoaded;
//begin load
loader.load();
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0xFFFFFF, true);
// create a renderer instance
var renderer = new PIXI.autoDetectRenderer(1024, 640);
// set the canvas width and height to fill the screen
renderer.view.style.display = "block";
renderer.view.style.width = "100%"
renderer.view.style.height = "100%"
// add render view to DOM
document.body.appendChild(renderer.view);
var postition = 0;
var background;
var background2;
function onAssetsLoaded()
{
background = PIXI.Sprite.fromImage("data/iP4_BGtile.jpg");
background2 = PIXI.Sprite.fromImage("data/iP4_BGtile.jpg");
stage.addChild(background);
stage.addChild(background2);
foreground = PIXI.Sprite.fromImage("data/iP4_ground.jpg");
foreground2 = PIXI.Sprite.fromImage("data/iP4_ground.jpg");
stage.addChild(foreground);
stage.addChild(foreground2);
foreground.position.y = foreground2.position.y = 640 - foreground2.height;
var pixie = new PIXI.Spine("data/PixieSpineData.json");
var scale = 0.3;//window.innerHeight / 700;
pixie.position.x = 1024/3;
pixie.position.y = 500
pixie.scale.x = pixie.scale.y = scale
//dragon.state.setAnimationByName("running", true);
stage.addChild(pixie);
pixie.stateData.setMixByName("running", "jump", 0.2);
pixie.stateData.setMixByName("jump", "running", 0.4);
pixie.state.setAnimationByName("running", true);
stage.click = function()
{
pixie.state.setAnimationByName("jump", false);
pixie.state.addAnimationByName("running", true);
}
var logo = PIXI.Sprite.fromImage("../../logo_small.png")
stage.addChild(logo);
logo.anchor.x = 1;
logo.position.x = 1024
logo.scale.x = logo.scale.y = 0.5;
logo.position.y = 640 - 70;
logo.setInteractive(true);
logo.buttonMode = true;
logo.click = logo.tap = function()
{
window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
}
requestAnimFrame(animate);
}
function animate() {
postition += 10;
background.position.x = -(postition * 0.6);
background.position.x %= 1286 * 2;
if(background.position.x<0)background.position.x += 1286 * 2;
background.position.x -= 1286;
background2.position.x = -(postition * 0.6) + 1286;
background2.position.x %= 1286 * 2;
if(background2.position.x<0)background2.position.x += 1286 * 2;
background2.position.x -= 1286;
foreground.position.x = -postition;
foreground.position.x %= 1286 * 2;
if(foreground.position.x<0)foreground.position.x += 1286 * 2;
foreground.position.x -= 1286;
foreground2.position.x = -postition + 1286;
foreground2.position.x %= 1286 * 2;
if(foreground2.position.x<0)foreground2.position.x += 1286 * 2;
foreground2.position.x -= 1286;
requestAnimFrame( animate );
renderer.render(stage);
}
</script>
</body>
</html>
